<template>
	<view class="shangpinxiangqing">
		<u-navbar :is-back="true" :border-bottom="false" :title-bold="true" :custom-back="handleBack">
			<view :class="isIos===1?'active-slot-wrap':isIos===2?'slot-wrap':''" v-if="isIos">
				商品详情
			</view>
		</u-navbar>
		<view class="" v-if="data != ''">
			<view class="swiper" v-if="data && data.goodsInfo && data.goodsInfo.gallery">
				<view class="swiper-pic" v-if="isVideo == 0">
					<swiper class="swiper-box" :indicator-dots="false" :autoplay="false" :circular="true" @change="handleSwiperIndex">
						<swiper-item class="swiper-item" v-for="(item,index) in data.goodsInfo.gallery" :key="index" @click="handleViewImage(item)">
							<image :src="item" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
					<!-- <u-swiper :list="data.goodsInfo.gallery" mode="none" @change="handleIndex" height="700" @click="handleswiper"></u-swiper> -->
					<view class="swiper-box1">
						<view class="swiper-box-number" v-if="isHaveVideo==0">
							<text class="swiper-box-number-text">{{picIndex}}</text>
							<text class="swiper-box-number-text1">/{{data.goodsInfo.gallery.length}}</text>
						</view>
						<view class="swiper-box-number" v-if="isHaveVideo == 1">
							<text class="swiper-box-number-text" v-if="typeListIndex != 0">{{picIndex}}</text>
							<text class="swiper-box-number-text1" v-if="typeListIndex != 0">/{{data.goodsInfo.gallery.length}}</text>
						</view>
						<view class="swiper-box-view" v-if="isHaveVideo == 1">
							<view :class="index===typeListIndex?'active-swiper-box-view-item' : 'swiper-box-view-item'" v-for="(item,index) in typeList" :key="index" @click="handletype(index)">{{item}}</view>
						</view>
						<view class="fenxiang-box">
							<image v-if="data.download == 1" @click="handleshowfenxiang" class="swiper-image" src="../../static/fenxiang@2x.png" mode=""></image>
						</view>
						
					</view>
					<image @click="handlePlay" v-if="isHaveVideo == 1 && typeListIndex == 0" class="bofang-btn" src="../../static/sp_bf@2x.png" mode=""></image>
				</view>
				<view class="video-box" @click="handleStop">
					<video id='video'  class="video"  :src="data.goodsInfo.videoUrl"  autoplay="false"  :poster="data.goodsInfo.videoPhoto" 
					:controls="false"   :loop="true"  :muted="false"  v-if="isVideo == 1"></video>
				</view>
			</view>
			<view class="box">				
				<view class="box-name">
					<view class="name">
						<text class="name-text1-group" style="color: #5D22BA;">开始时间 {{groupInfo.beginTime}}</text>
					</view>
				</view>
				<view class="box-name">
					<view class="name">
						<text class="name-text1-group" style="color: #5D22BA;">结束时间 {{groupInfo.endTime}}</text>
					</view>
				</view>
				<view class="box-name" style="margin-top: 10rpx;">
					<view class="name">
						<text class="name-text">{{data&&data.goodsInfo?data.goodsInfo.name : ''}}</text>
						<text class="name-text1">(佣金+{{commission}})</text>
					</view>
					<image  @click="handleshowfenxiang" class="swiper-image" src="../../static/fenxiang@2x.png" mode=""></image>
				</view>
				<view class="price">
					<view class="price-left">
						<text class="price-left-text">拼团价￥ {{data&&data.groupInfo?data.groupInfo.groupBuyPrice : 0}}</text>
						<text class="price-left-text1">￥ {{data&&data.goodsInfo?data.goodsInfo.counterPrice : 0}}</text>
						<view class="price-left-text2" >{{data.goodsInfo.isSince?'支持自提&邮寄':'支持邮寄'}}</view>
					</view>
				</view>
				<view class="price-right" style="margin-top: 10rpx;">{{data&&data.goodsInfo?data.goodsInfo.sales : 0}}人已购买</view>
			</view>
			<view class="box1" @click="handleshangpinpingjia">
				<text class="box1-text">商品评价（{{data&&data.commentCount?data.commentCount : 0}}）</text>
				<image class="box1-image" src="../../static/xiayibu@2x.png" mode=""></image>
			</view>
			<view class="box-baozhang" @click="handlewuliu">
				<view class="box-baozhang-left">
					<text class="box1-text1">物流</text>
					<view class="box-baozhang-view1">
						<view class="box-baozhang-view1-view">暂不发货地区：</view>
						<view class="box-baozhang-view1-view1" v-for="(tab,i) in data.noDeliveryRegionList" :key="i">
							{{tab.name}};
						</view>
					</view>
				</view>
				<image class="box1-image" src="../../static/xiayibu@2x.png" mode=""></image>
			</view>
			
			<view class="box-baozhang" v-if="goodsSecurityList.length > 0" @click="handlebaozhang">
				<view class="box-baozhang-left">
					<text class="box1-text">保障</text>
					<view class="box-baozhang-view">
						<view class="box-baozhang-view-item" v-for="(tab,i) in goodsSecurityList" :key="i">
							<image src="../../static/gou.png" mode=""></image>
							<text>{{tab.title}}</text>
						</view>
					</view>
				</view>
				<image class="box1-image" src="../../static/xiayibu@2x.png" mode=""></image>
			</view>
			<view class="box2" v-if="recommendList.length > 0">
				<view class="box2-title">
				    <view class="box2-title-xian"></view>	
					<view class="box2-title-view">热卖推荐</view>	
					<view class="box2-title-xian"></view>	
				</view>
				<goodsList :list="recommendList"></goodsList>
			</view>
			<view class="box2">
				<view class="box2-title">
				    <view class="box2-title-xian"></view>	
					<view class="box2-title-view">商品详情</view>	
					<view class="box2-title-xian"></view>	
				</view>
				<view class="u-content">
					<u-parse :html="data.goodsInfo.detail" :show-with-animation="true"></u-parse>
				</view>
			</view>
			<view class="box2" v-if="likeList.length > 0">
				<view class="box2-title">
				    <view class="box2-title-xian"></view>	
					<view class="box2-title-view">猜你喜欢</view>	
					<view class="box2-title-xian"></view>	
				</view>
				<goodsList :list="likeList"></goodsList>
			</view>
			<view class="box3"></view>
			<view class="box4">
				<view class="box4-item" @click="handleshouye">
					<image class="box4-item-image" src="http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919964152937061.png" mode=""></image>
					<text class="box4-item-text">首页</text>
				</view>
				<view class="box4-item" @click="$u.throttle(handleCollect, 1000)">
					<image class="box4-item-image" v-if="data.isCollectFresh" src="../../static/spxq_sc_2@2x.png" mode=""></image>
					<image class="box4-item-image" v-else src="http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919964400722378.png" mode=""></image>
					<text class="box4-item-text">收藏</text>
				</view>
				<!-- <view class="box4-btn-gwd" @click="handleShow(0)" v-if="isGroup == 0">加入购物车</view> -->
				<view class="box4-btn-none"></view>
				<!-- <view class="box4-btn-gm" @click="handleShow(1)" v-if="isGroup == 0">立即购买</view> -->
				<view class="box4-btn-gm" @click="handleShow(1)" >立即拼团</view>
			</view>
		</view>
		
		
		<!-- 加入购物袋 立即购买弹框 -->
		<u-mask :show="show" @click="show = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="rect-box">
						<view class="rect-box-left">
							<image :src="data.productList[0].valueList[specListIndex].specificationImg" mode="aspectFill" @click="viewSpeImage(data.productList[0].valueList[specListIndex].specificationImg)"></image>
							<view class="rect-box-left-content">
								<view class="rect-box-left-content-name">{{data.goodsInfo.name}}</view>
								<view class="rect-box-left-content-price" >
									<view class="rect-box-left-content-price-text" >
										拼团价 ￥ {{data.groupInfo.groupBuyPrice}}
										<view class="rect-box-left-content-price-text1" style="margin: 10rpx 0;">￥ {{data.productList[0].valueList[specListIndex].price}}</view>
									</view>
									
								<!-- </view>
								<view class="rect-box-left-content-price"> -->
									<!-- <text class="rect-box-left-content-price-text">拼团价 ￥ {{data.groupInfo.groupBuyPrice}}</text> -->
									<!-- <text class="rect-box-left-content-price-text1">￥ {{data.productList[0].valueList[specListIndex].price}}</text> -->
								</view>
							</view>
						</view>
						<image class="rect-box-image" src="../../static/tc_x@2x.png" mode="" @click="show = false"></image>
					</view>
					
					<view class="rect-box1">
						<view class="rect-box1-title">{{data.productList[0].name}}</view>
						<view class="rect-box1-container">
							<view :class="specListIndex===index? 'rect-box1-container-item1' : 'rect-box1-container-item'" v-for="(item,index) in data.productList[0].valueList" :key="index" @click="handlespec(index,item.number)">
								<text>{{item.specificationValue}}</text>
								<text :class="specListIndex===index? 'active-quehuo' : 'quehuo'" v-if="item.number == 0 && isShuang == 0">已售罄</text>
							</view>
						</view>
					</view>
					<view class="rect-box1" v-if="data && data.productList.length == 2">
						<view class="rect-box1-title">{{data.productList[1].name}}</view>
						<view class="rect-box1-container">
							<view :class="attrListIndex===index? 'rect-box1-container-item1' : 'rect-box1-container-item'" v-for="(item,index) in attrList" :key="index" @click="handleattr(index,item.number)">
								<text>{{item.specificationValue}}</text>
								<text :class="attrListIndex===index? 'active-quehuo' : 'quehuo'" v-if="item.number == 0 && isShuang == 1">已售罄</text>
							</view>
						</view>
					</view>
					
					<view class="rect-box2">
						<view class="rect-box2-title">
							数量
						</view>
						<view class="rect-box2-number">
							<!-- <image src="../../static/sl_jian@2x.png" mode="" @click="handleoperation(-1)"></image> -->
							<text>{{num}}</text>
							<!-- <image src="../../static/sl_jia@2x.png" mode="" @click="handleoperation(1)"></image> -->
						</view>
					</view>
					<view class="rect-box3">
						<view class="rect-box3-price">
							￥ {{totalPrice}}
							<text class="rect-box-left-content-price-text1">￥ {{data.productList[0].valueList[specListIndex].price}}</text>
						</view>
					    <!-- <view class="box4-btn-gm" v-if="isBuy == 0 && isKucun == 0" @click="$u.throttle(handlejiarugouwudai, 1000)">加入购物袋</view> -->
						<view class="box4-btn-gm" v-if="isBuy == 1 && isKucun == 0" @click="$u.throttle(handlelijigoumai, 1000)">立即购买</view>
						
						<view class="box4-btn-gm" v-if="isBuy == 0 && isKucun == 1">暂无库存</view>
						<view class="box4-btn-gm" v-if="isBuy == 1 && isKucun == 1">暂无库存</view>
					</view>
				</view>
			</view>
		</u-mask>
		<!-- 物流 -->
		<u-mask :show="show2" @click="show2 = false">
			<view class="warp">
				<view class="rect-wuliu" @tap.stop>
					<view class="rect-wuliu">
						<view class="box-wuliu">
							<view class="box-wuliu-title">物流</view>
							<view class="box-wuliu-view">物流：{{data.logisticsInstructions}}</view>
							<view class="box-wuliu-view1">
								<text>暂不发货地区：</text>
								<text v-for="(item,index) in data.noDeliveryRegionList" :key="index">{{item.name}};</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-mask>
		<!-- 保障弹框 -->
		<u-mask :show="show1" @click="show1 = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="security-box">
						<view class="security-item" v-for="(item,index) in goodsSecurityList1" :key="index">
							<view class="security-item-title">
								<image src="../../static/gou.png" mode=""></image>
								<text>{{item.title}}</text>
							</view>
							<view class="security-item-content">{{item.content}}</view>
						</view>
						<view class="security-box-btn">
							<view class="security-btn"  @click="show1 = false">
								我知道了
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-mask>
		
		<u-mask :show="showfenxiang">
			<view class="warp1">
				<!-- <view class="" v-if="isCanvas">
					<canvas :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="myCanvas" id="myCanvas"></canvas>
				</view> -->
				<view class="xiazai" v-if="isflag">
					<image src="../../static/fx_gb.png" mode="" @click="handleclose"></image>
					<image src="../../static/fx_bd@2x.png" mode="" @click="saveShareImg()"></image>
				</view>
			</view>
		</u-mask>
		
		<u-mask :show="show3">
			<view class="warp">
				<view class="rect3">
					<view class="rect3-box">
						<button open-type="share" class="rect3-box-item">
							<image class="rect3-box-item-image" src="../../static/zhaunfa_1.png" mode=""></image>
							<text class="rect3-box-item-text">转发给朋友</text>
						</button>
						<view class="rect3-box-item1" @click="generate">
							<image class="rect3-box-item-image" src="../../static/zhuanfa_2.png" mode=""></image>
							<text class="rect3-box-item-text">生成分享海报</text>
						</view>
					</view>
					<view class="rect3-bottom" @click="show3 =false">
						取消
					</view>
				</view>
				
			</view>
		</u-mask>
		
		<u-mask :show="show4">
			<view class="warp4">
				<view class="rect4">
					<view class="rect4-top">
						<text>分享海报</text>
						<image src="../../static/fx_gb.png" mode="" @click="handleclose"></image>
					</view>
					<view class="" v-if="isCanvas">
						<canvas :style="{ width:  '309px', height:'563px' }" canvas-id="myCanvas" id="myCanvas"></canvas>
					</view>
					<view class="rect4-btn" @click="saveShareImg()">
						保存海报
					</view>
				</view>
				
			</view>
		</u-mask>
		<!-- 隐私弹框 -->
		<privacy v-if="showPrivacy" @change="showPrivacyChange"></privacy>
		
		<view class="box-xuanfu">
			<button open-type='contact' class="box-xuanfu-btn">
				<image src="http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919964970796680.png" mode=""></image>
			</button>
			
			<image @click="handlegouwudai" src="http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919965209193384.png" mode=""></image>
			<image @click="handlewode" src="http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919965323124811.png" mode=""></image>
		</view>
		<u-back-top :scrollTop="scrollTop" :mode="mode" :icon-style="iconStyle" icon="https://five-palace.oss-cn-hangzhou.aliyuncs.com/loveFruit/167091908990567.png"></u-back-top>
	</view>
</template>

<script>
	var uploadImage = require('../../common/uploadFile.js');//地址换成你自己存放文件的位置
	var util = require('../../common/formatTime.js');
	var base64src = require('../../common/base64src.js')
	export default {
		data() {
			return {
				goodsPhoto:['http://523tongcheng.oss-cn-hangzhou.aliyuncs.com/webStorage/web_16678722070574997.png','http://523tongcheng.oss-cn-hangzhou.aliyuncs.com/webStorage/web_16678722070574997.png','http://523tongcheng.oss-cn-hangzhou.aliyuncs.com/webStorage/web_16678722070574997.png'],
				picIndex:1,
				content:'',
				data:'',
				show:false,
				specListIndex:0,
				attrListIndex:0,
				attrList:[],
				totalPrice:0,
				num:1,
				isBuy:0,
				showfenxiang:false,
				likeList:[],
				recommendList:[],
				canvasW:340, // 画布宽
				canvasH:510, // 画布高
				SystemInfo:{}, // 设备信息
				goodsImg: {}, // 商品主图
				ewmImg:{}, // 二维码图片
				ewmW:120, // 二维码大小
				title:'足金光身卜面素圈黄金戒指开口戒', // 商品标题
				price:'', // 价格
				Oldprice:'', // 原价
                isflag:false,
				isCanvas:false,
				imgUrl:'',
				backUrl:'',
				qrCode:'',
				isIndex:0,
				scrollTop: 0,
				iconStyle: {
					// fontSize: '32rpx',
					// color: '#2979ff',
					width: '128rpx',
					height: '128rpx'
				},
				show1:false,
				goodsSecurityList:[],
				goodsSecurityList1:[],
				show2:false,
				isKucun:0,
				isShow:true,
				isShuang:1,
				typeListIndex:0,
				typeList:['视频','图片'],
				isHaveVideo:0,
				isVideo:0,
				isIos:'',
				share:{},
				show3:false,
				show4:false,
				bg:'',
				commission:0,
				showPrivacy:false,
				groupId:0,
				groupInfo:{},
			}
		},
		onLoad(options) {
			if (uni.getSystemInfoSync().osName=='ios') {
				this.isIos = 1
			}
			if (uni.getSystemInfoSync().osName=='android'){
				this.isIos = 2
			}
			if (options.groupId) {
				this.groupId = options.groupId;
			}
			
			console.log(options)
			if (options.scene) {
				this.goodsId = decodeURIComponent(options.scene)
				this.isIndex = 1				
			}else{
				this.index = 0
				this.goodsId = options.goodsId
				let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。
				let prevPage = pages[ pages.length - 2 ];
				if (prevPage) {
					console.log(prevPage.route,'prevPage')
					this.backUrl = prevPage.route
				}
			}
			
			this.getGoodsDetail()
			this.getguessYouLike()
			this.getsellingRecommend();			
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			//跳转到首页
			handleshouye(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			//跳转到购物袋
			async handlegouwudai(){
				const res = await this.$u.api.getUserInfo()
				uni.switchTab({
					url:'/pages/gouwudai/gouwudai'
				})
			},
			//跳转到我的
			async handlewode(){
				const res = await this.$u.api.getUserInfo()
				uni.switchTab({
					url:'/pages/wode/wode'
				})
			},
			//返回上一页
			handleBack(){
				if (this.index == 0) {
					console.log(111,this.backUrl)
					if (this.backUrl == 'pages/login/login') {
						uni.switchTab({
							url:'/pages/index/index'
						})
					} else{
						uni.navigateBack({
							
						})
					}
				}else{
					uni.switchTab({
						url:'/pages/index/index'
					})
				}
				
			},
			//商品详情
			async getGoodsDetail(){
				const userInfo = await this.$u.api.getUserInfo()
				console.log('userInfo',userInfo)
				const params = {
					goodsId:this.goodsId,
					groupId: this.groupId,
					userId: userInfo.data.id,
				}
				const res = await this.$u.api.goodsDetailByGroup(params)
				console.log(res,'商品详情')
				this.data = res.data
				this.price = this.data.goodsInfo.counterPrice
				this.Oldprice = this.data.goodsInfo.retailPrice
				this.groupInfo = this.data.groupInfo;
				this.title = this.data.goodsInfo.name
				this.vipType = this.data.vipType;
				this.commission = this.data.productList[0].valueList[0].commission
				if (res.data.productList.length == 2) {
					res.data.productList[1].valueList.forEach(v=>{
						if (v.pid == res.data.productList[0].valueList[0].specificationId) {
							this.attrList.push(v)
						}
					})
					if (res.data.productList[1].valueList[0].number == 0) {
						this.isKucun = 1
					}
					this.isShuang = 1
				}else{
					this.isShuang = 0
				}
				this.goodsSecurityList = []
				this.goodsSecurityList1 = res.data.goodsSecurityList
				if (res.data.goodsSecurityList.length > 3) {
					res.data.goodsSecurityList.forEach((v,i)=>{
						if (i < 3) {
							this.goodsSecurityList.push(v)
						}
					})
				} else{
					this.goodsSecurityList1 = res.data.goodsSecurityList
				}
				// console.log(this.goodsSecurityList2)
				//this.data.goodsInfo.videoUrl = 'http://five-palace.oss-cn-hangzhou.aliyuncs.com/beizhi/1670316475284_70f8853e.mp4'
				if (this.data.goodsInfo.videoUrl) {
					this.isHaveVideo = 1
					this.data.goodsInfo.videoPhoto = this.data.goodsInfo.videoUrl + '?x-oss-process=video/snapshot,t_10000,m_fast'
					this.data.goodsInfo.gallery.unshift(this.data.goodsInfo.videoPhoto)
				} else{
					this.isHaveVideo = 0
				}
				const key = 'goodsId=' + res.data.goodsInfo.id
				this.share = { // 分享到微信和朋友圈
					title: res.data.goodsInfo.name,
					path: '/pages/index/index?' + key,
					imageUrl: 'http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919795818803423.png',
					desc:'嗨美汇',
					content:'嗨美汇是一个为百业赋能的数字化营销平台'
				}
			},
			//猜你喜欢
            async getsellingRecommend(){
				const params = {
					goodsId:this.goodsId
				}
				const res = await this.$u.api.sellingRecommend(params)
				this.recommendList = res.data
			},
			//猜你喜欢
			async getguessYouLike(){
				const params = {
					goodsId:this.goodsId
				}
				const res = await this.$u.api.guessYouLike(params)
				this.likeList = res.data
			},
			//轮播图index
			handleIndex(e){
				this.picIndex = e + 1
			},
			handleSwiperIndex(e){
				console.log(e)
				this.picIndex = e.detail.current + 1
				
				if (e.detail.current==0) {
				    this.typeListIndex = 0	
				} else{
					this.typeListIndex = 1
				}
			},
			//选择视频或者图片
			handletype(index){
				this.typeListIndex = index
			},
			//播放视频
			handlePlay(){
				this.isVideo = 1
			},
			//关闭视频
			handleStop(){
				this.isVideo = 0
			},
			//点击轮播图
			handleswiper(e){
				console.log(e)
				uni.previewImage({
				    urls: this.data.goodsInfo.gallery,
				    current: this.data.goodsInfo.gallery[e]
				});
			},
			handleViewImage(url){
				uni.previewImage({
				    urls: this.data.goodsInfo.gallery,
				    current: url
				});
			},
			//收藏
			async handleCollect(){
				const params = {
					goodsId:this.goodsId
				}
				const res = await this.$u.api.addordelete(params)
				this.$u.toast(res.msg)
				this.getGoodsDetail()
			},
			//打开弹框加入购物车
			handleShow(data){
				this.isBuy = data
				console.log(this.isBuy)
				console.log(this.isKucun)
				this.show = true;
				this.totalPrice = this.data.groupInfo.groupBuyPrice;// this.data.productList[0].valueList[0].price
				console.log(this.data.productList[0].valueList.price)
			},
			//查看规格图片
			viewSpeImage(url){
				var array = []
				array.push(url)
				uni.previewImage({
				    urls: array,
				    current: url
				});
			},
			//选择规格
			handlespec(index,number){
				if (this.isShuang == 0) {
					if (number == 0) {
						this.isKucun = 1
					}else{
						this.isKucun = 0
					}
				}
				this.commission = this.data.productList[0].valueList[index].commission
				this.specListIndex = index
				this.num = 1
				// this.totalPrice = this.data.productList[0].valueList[this.specListIndex].price * this.num;
				this.totalPrice = this.data.groupInfo.groupBuyPrice * this.num;
				if (this.data.productList.length > 1) {
					this.attrList = []
					this.data.productList[1].valueList.forEach(v=>{
						if (v.pid == this.data.productList[0].valueList[index].specificationId) {
							this.attrList.push(v)
						}
					})
					this.attrListIndex = 0
					console.log(this.attrList)
				}
				
			},
			//选择规格第二个
			handleattr(index,number){
				if (this.isShuang == 1) {
					if (number == 0) {
						this.isKucun = 1
					}else{
						this.isKucun = 0
					}
				}
				this.attrListIndex = index
				console.log(this.attrListIndex)
			},
			//数量加减
			handleoperation(data){
				// if (data == -1 && this.num == 1) {
				// 	this.$u.toast('数量最少为1')
				// } else{
				// 	this.num = this.num + data;
				// 	// this.totalPrice = this.data.productList[0].valueList[this.specListIndex].price*this.num;
				// 	this.totalPrice = this.data.groupInfo.groupBuyPrice * this.num;
				// }
			},
			//加入购物袋
			async handlejiarugouwudai(){
				const params = {
					//以前的传参方式 productId
					// productId:this.data.productList[0].valueList[this.specListIndex].productId,
					
					//现在的传参方式 specificationId
					specificationId:this.data.productList.length === 1? this.data.productList[0].valueList[this.specListIndex].specificationId : this.attrList[this.attrListIndex].specificationId,
					number:this.num
				}
				const res = await this.$u.api.addOrReduceCart(params)
				this.$u.toast(res.msg)
				this.show = false
			},
			//立即购买
			async handlelijigoumai(){
				// const res = await this.$u.api.getUserInfo() ;
				// console.log('handlelijigoumai', res);
				if(this.vipType >= 1){
					var specificationId = this.data.productList.length === 1? this.data.productList[0].valueList[this.specListIndex].specificationId :this.attrList[this.attrListIndex].specificationId
					const params = 'type=0&specificationId=' + specificationId + '&number=' + this.num +'&groupId=' + this.groupId +'&orderType=1'
					uni.navigateTo({
						url:'/pages/querendingdan/querendingdan?' + params
					})
				}else{
					this.$u.toast('您不是会员不能参与该活动')
				}
			},
			//商品评价
			handleshangpinpingjia(){
				const params = 'goodsId=' + this.goodsId
				uni.navigateTo({
					url:'/pages/shangpinpingjia/shangpinpingjia?' + params
				})
			},
			//打开保障弹框
			handlebaozhang(){
				this.show1 = true
			},
			//打开物流弹框
			handlewuliu(){
				this.show2 = true
			},
			//打开分享
			handleshowfenxiang(){
				this.show3 = true
				// this.showfenxiang = true
				// this.isCanvas = true
				// this.createCanvasImage()
				
			},
			//生成海报
			generate(){
				if (this.vue_privacy.showPrivacy) {
					this.showPrivacy = true
				} else{
					setTimeout(v=>{
						this.show4 = true
						this.isCanvas = true
					},1500)
					this.createCanvas()
									
				}
				
			},
			// 获取图片信息
			getImageInfo(image) {
				return new Promise((req, rej) => {
					uni.getImageInfo({
						src: image,
						success: function(res) {
							req(res)
						},
					});
				})
			},
			
			// 获取设备信息
			getSystemInfo(){
				return new Promise((req, rej) => {
					uni.getSystemInfo({
					    success: function (res) {
					        req(res)
					    }
					});
				})
			},
			async createCanvasImage(){
				var that = this
				// 获取设备信息，主要获取宽度，赋值给canvasW 也就是宽度：100%
				this.SystemInfo = await this.getSystemInfo();
				// 获取商品主图，二维码信息，APP端会返回图片的本地路径（H5端只能返回原路径）
				//this.logo = await this.getImageInfo('https://chongaiguo.oss-cn-beijing.aliyuncs.com/loveFruit/166858749337198.png');
				this.data.goodsInfo.picUrl = this.data.goodsInfo.picUrl.substring(0, 4) + "s" + this.data.goodsInfo.picUrl.substring(4)
				console.log(this.data.goodsInfo.picUrl)
				this.goodsImg = await this.getImageInfo(this.data.goodsInfo.picUrl);
				console.log(this.goodsImg,'this.goodsImg')
				//const shareUrl = 'http://ahhzy.oss-cn-hangzhou.aliyuncs.com/webStorage/web_16926958571424741.png'
				this.ewmImg = await this.getImageInfo(this.data.goodsInfo.shareUrl);
				//this.ewmImg = await this.getImageInfo(shareUrl);
				// this.canvasW = this.SystemInfo.windowWidth; // 画布宽度
				this.canvasW = 340; // 画布宽度
				this.canvasH = 340;  // 画布高度 = 主图高度+二维码高度 + 文字图片的间距（大概50）
				
				// 如果主图，二维码图片，设备信息都获取成功，开始绘制海报，这里需要用setTimeout延时绘制，否则可能会出现图片不显示。
				if(this.goodsImg.errMsg == 'getImageInfo:ok' ){
					console.log('ok')
					uni.showToast({
						icon:'loading',
						mask:true,
						duration:10000,
						title: '海报绘制中',
					});
					setTimeout(()=>{
						this.isflag = true
						var ctx = uni.createCanvasContext('myCanvas', this);
						// 填充背景色，白色
						ctx.setFillStyle('#ffffff'); // 默认白色
						ctx.fillRect(0, 0, this.canvasW, this.canvasH) // fillRect(x,y,宽度，高度)
						//绘制logo
						//ctx.drawImage(this.logo.path, 83, 24, 146, 47) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
						
						// 绘制商品主图
						ctx.drawImage(this.goodsImg.path, 0, 0, 340, 340) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
						
						//ctx.drawImage(this.logo1.path, 65, 410, 182, 24) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
						// 二维码
						//先画个圆
						ctx.save();
						ctx.beginPath(); //开始绘制
						ctx.arc(311,  311, 25, 0, Math.PI * 2);
						ctx.setFillStyle('#ffffff')
						ctx.fill()//保证图片无bug填充
						ctx.clip();//画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
						
						ctx.drawImage(this.ewmImg.path, 285,286,50,50) // 推进去图片
						ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
												
						
						//ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
						// ctx.shadowOffsetX = 5;
						// ctx.shadowOffsetY = 5;
						// ctx.shadowColor = '#333';
						// ctx.shadowBlur = 10;
						//ctx.fillRect(155,297,130,35);
					    
						if (this.data.goodsInfo.isOpenPrice) {
							// //绘制背景色
							// let x=155,y=475,w=130,h=22,r=10
							let x=135,y=305,w=150,h=22,r=10
							ctx.save();
							 ctx.beginPath()
							 // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
							 ctx.setFillStyle('transparent')
							 // ctx.setStrokeStyle('transparent')
							 // 左上角
							 ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
							 
							 // border-top
							 ctx.moveTo(x + r, y)
							 ctx.lineTo(x + w - r, y)
							 ctx.lineTo(x + w, y + r)
							 // 右上角
							 ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
							 
							 // border-right
							 ctx.lineTo(x + w, y + h - r)
							 ctx.lineTo(x + w - r, y + h)
							 // 右下角
							 ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
							 
							 // border-bottom
							 ctx.lineTo(x + r, y + h)
							 ctx.lineTo(x, y + h - r)
							 // 左下角
							 ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
							 
							 // border-left
							 ctx.lineTo(x, y + r)
							 ctx.lineTo(x + r, y)
							 
							// 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应
							ctx.fill()
							 // ctx.stroke()
							ctx.closePath()
							 // 剪切
							ctx.clip()
							ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
							ctx.fillRect(135,305,150,22);
							ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
							
							
							
							ctx.setFontSize(10) // 字号
							ctx.setFillStyle('#ffffff') // 颜色
							
							// ctx.fillText('现价￥'+this.Oldprice, 170, 490); // （文字，x，y）
							ctx.fillText('现价￥'+this.Oldprice, 145, 320); // （文字，x，y）
							
							
							ctx.setFontSize(9)
							ctx.setFillStyle('#FCFCFC')
							ctx.fillText('原价￥'+this.price, 235, 319);
							
							ctx.beginPath()
							const textWidth = ctx.measureText('原价￥'+this.price,).width 
							ctx.setFillStyle('#FCFCFC')
							ctx.rect(235,315,textWidth,1)
							ctx.fill()
							 // ctx.stroke()
							ctx.closePath()
						}
						
						
						
						
						//ctx.drawImage(this.ewmImg.path, 250, 255, 80, 80) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度,二维码的宽,高)
						
						// 3、绘制商品标题，多余文字自动换行
						//ctx.setFontSize(14); // setFontSize() 设置字体字号
						//ctx.setFillStyle('#333333'); // setFillStyle() 设置字体颜色
						
						/* str 这段代码是我百度找的，参考别人的。canvas不能自动换行，需要自行计算 */
						// let _strlineW = 0;
						// let _strLastIndex = 0; //每次开始截取的字符串的索引
						// let _strHeight = 345; //绘制字体距离canvas顶部的初始高度
						// let _num = 1;
						// for (let i = 0; i < this.title.length; i++) {
						// 	_strlineW += ctx.measureText(this.title[i]).width;
						// 	if (_strlineW > this.canvasW-28) {
						// 		if(_num == 2 && 2){
						// 			//文字换行数量大于二进行省略号处理
						// 			ctx.fillText(this.title.substring(_strLastIndex, i-5)+'...', 10, _strHeight);
						// 			_strlineW = 0;
						// 			_strLastIndex = i;
						// 			_num++;
						// 			break;
						// 		}else{
						// 			ctx.fillText(this.title.substring(_strLastIndex, i), 10, _strHeight);
						// 			_strlineW = 0;
						// 			_strHeight += 20;
						// 			_strLastIndex = i;
						// 			_num++;
						// 		}
						// 	}else if (i == this.title.length - 1) {
						// 		ctx.fillText(this.title.substring(_strLastIndex, i + 1), 10, _strHeight);
						// 		_strlineW = 0;
						// 	}
						// }
						/* end */
						// ctx.setFillStyle('red') // 颜色
						// ctx.fillRect(60, 280, 180, 80)
						//4、商品价格
						// ctx.setFontSize(14) // 字号
						// ctx.setFillStyle('#ffffff') // 颜色
						
						// ctx.fillText('现价￥'+this.Oldprice, 80, 305); // （文字，x，y）
						
						
						// ctx.setFontSize(12)
						// ctx.setFillStyle('#ffffff')
						// ctx.fillText('原价￥'+this.price, 165, 305);
						
						// 5、邀请信息
						// ctx.setFontSize(16)
						// ctx.setFillStyle('#333')
						// ctx.fillText(this.name+'推荐给你', 10, this.canvasW +100);
						
						// ctx.setFontSize(14)
						// ctx.setFillStyle('#999999')
						// ctx.fillText('长按或扫描识别二维码', 12, 510);
				
						
						ctx.draw(true,(ret)=>{ // draw方法 把以上内容画到 canvas 中。
							console.log(ret) 
							uni.showToast({
								icon:'success',
								mask:true,
								title: '绘制完成',
							});
							uni.canvasToTempFilePath({ // 保存canvas为图片
								canvasId: 'myCanvas',
								quality: 1,
								
								complete: function(res) {
									// 在H5平台下，tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
									console.log(res,11111)
									that.imgUrl = res.tempFilePath
								} ,
							})
						});
					},1500)
				}else{
					console.log('err')
				}
			},
			async createCanvas(){
				var that = this
				// 获取设备信息，主要获取宽度，赋值给canvasW 也就是宽度：100%
				this.SystemInfo = await this.getSystemInfo();
				// 获取商品主图，二维码信息，APP端会返回图片的本地路径（H5端只能返回原路径）
				this.bg = await this.getImageInfo('https://hmh-app.oss-cn-beijing.aliyuncs.com/loveFruit/169329850134269.png');
				this.data.goodsInfo.picUrl = this.data.goodsInfo.picUrl.substring(0, 4) + "s" + this.data.goodsInfo.picUrl.substring(4)
				this.goodsImg = await this.getImageInfo(this.data.goodsInfo.picUrl);
				this.ewmImg = await this.getImageInfo(this.data.goodsInfo.shareUrl);
				this.canvasW = 309; // 画布宽度
				this.canvasH = 563;  // 画布高度 = 主图高度+二维码高度 + 文字图片的间距（大概50）
				
				// 如果主图，二维码图片，设备信息都获取成功，开始绘制海报，这里需要用setTimeout延时绘制，否则可能会出现图片不显示。
				if(this.goodsImg.errMsg == 'getImageInfo:ok' ){
					console.log('ok')
					uni.showToast({
						icon:'loading',
						mask:true,
						duration:10000,
						title: '海报绘制中',
					});
					setTimeout(()=>{
						console.log(this.bg)
						var ctx = uni.createCanvasContext('myCanvas', this);
						// 填充背景色，白色
						ctx.setFillStyle('#ffffff'); // 默认白色
						ctx.fillRect(0, 0, this.canvasW, this.canvasH) // fillRect(x,y,宽度，高度)
						//绘制背景
						ctx.drawImage(this.bg.path, 0, 0, 309, 563) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
						//绘制商品
						ctx.drawImage(this.goodsImg.path,34, 140, 240, 240) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
						// 二维码
						//先画个圆
						ctx.save();
						ctx.beginPath(); //开始绘制
						ctx.arc(270, 460, 30, 0, Math.PI * 2);
						ctx.setFillStyle('#ffffff')
						ctx.fill()//保证图片无bug填充
						ctx.clip();//画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
						
						ctx.drawImage(this.ewmImg.path, 240,427,60,60) // 推进去图片
						ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
						
						ctx.draw(true,(ret)=>{ // draw方法 把以上内容画到 canvas 中。
							console.log(ret) 
							uni.showToast({
								icon:'success',
								mask:true,
								title: '绘制完成',
							});
							uni.canvasToTempFilePath({ // 保存canvas为图片
								canvasId: 'myCanvas',
								quality: 1,
								
								complete: function(res) {
									// 在H5平台下，tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
									console.log(res,11111)
									that.imgUrl = res.tempFilePath
								} ,
							})
						});
					},1500)
				}else{
					console.log('err')
				}
			},
			
			//关闭
			handleclose(){
				this.show4 = false
				this.showfenxiang = false
				this.isCanvas = false
				this.isflag = false
			},
			//关闭隐私
			showPrivacyChange(){
				this.showPrivacy = false
			},
			// 保存到系统相册
			saveShareImg() {
				var that = this
				uni.authorize({
				    /* 这个就是保存相册的 */
				    scope: 'scope.writePhotosAlbum',
				    success() {
				        /* 保存图片方法 */
				        that.img();						
				    },
				    complete(res) {
				        console.log(res);
				        /* 这里判断一下如果没有授权重新打开设置选项 */
				        uni.getSetting({
				            success(res) {
				                if (!res.authSetting['scope.writePhotosAlbum']) {
				                    /* 打开设置的方法 */
				                    that.opensit();
				                }
				            }
				        });
				    }
				})
			},
			opensit() {
			    uni.showModal({
			        content: '由于您还没有允许保存图片到您相册里,这无法进行分享操作点击确定去允许授权',
			        success: function(res) {
			            if (res.confirm) {
			                /* 这个就是打开设置的API*/
			                uni.openSetting({
			                    success(res) {
			                        console.log(res.authSetting);
			                    }
			                });
			            } else if (res.cancel) {
			                uni.showModal({
			                    cancelText: '依然取消',
			                    confirmText: '重新授权',
			                    content: '很遗憾你点击了取消，这将无法进行分享操作，请慎重考虑',
			                    success: function(res) {
			                        if (res.confirm) {
			                            uni.openSetting({
			                                success(res) {
			                                    console.log(res.authSetting);
			                                }
			                            });
			                        } else if (res.cancel) {
			                            console.log('用户不授权');
			                        }
			                    }
			                });
			            }
			        }
			    });
			},
			img() {
				var that = this
			    /* 获取图片信息 */
			    uni.getImageInfo({
			        src: this.imgUrl,
			        success: function(image) {
			            /* 保存图片到相册 */
			            uni.saveImageToPhotosAlbum({
			                filePath: image.path,
			                success: function() {
			                    console.log('save success');
								// uni.showModal({
								// 	title: '保存成功',
								// 	content: '图片已成功保存到相册',
								// });
								that.$u.toast('图片已成功保存到相册')
								that.handleclose()
								that.show3 = false
								// that.showfenxiang = false
								// that.isCanvas = false
			                },
			                complete(res) {
			                    console.log(res);
			                }
			            });
			        }
			    });
			},
			
		},
		onShareAppMessage(res) {
			console.log(this.data)
		    if (res.from === 'button') {// 来自页面内分享按钮
		        console.log(res.target)
		    }
		    return {
		        title: this.data.goodsInfo.name + ' 会员才可以拼团哟~', //分享的名称
		        path: '/pages/shangpinxiangqing/groupdetail?goodsId=' + this.goodsId + '&groupId=' + this.groupId ,
				imageUrl: this.data.goodsInfo.picUrl,
		        mpId:'wx302e8354395d5a1b' //此处配置微信小程序的AppId
		    }
		},
	}
</script>

<style scoped lang="scss">
    .slot-wrap {
    	font-size: 29rpx;
    	font-family: PingFang SC-Medium, PingFang SC;
    	font-weight: bold;
    	color: #333333;
    	line-height: 29rpx;
    }
	.active-slot-wrap{
		padding-left: 234rpx;;
		font-size: 29rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 29rpx;
	}
	.swiper{
		width: 100%;
		height: 750rpx;
	}
	.video-box{
		width: 100%;
		height: 750rpx;
	}
	.video{
		width: 100%;
		height: 750rpx;
	}
	.swiper-pic{
		width: 100%;
		height: 750rpx;
		position: relative;
	}
	.swiper-box{
		width: 100%;
		height: 750rpx;
	}
	.swiper-item{
		width: 100%;
		height: 750rpx;
	}
	.swiper-item image{
		width: 750rpx;
		height: 750rpx;
	}
	.bofang-btn{
		position: absolute;
		top: 298rpx;
		left: 323rpx;
		width: 104rpx;
		height: 104rpx;
	}
	.swiper-box1{
		padding: 0rpx 36rpx;
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 48rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.swiper-box-number{
		width: 48rpx;
		height: 48rpx;
	}
	.swiper-box-number-text{
		font-size: 32rpx;
		font-family: Arvo-Regular, Arvo;
		font-weight: 400;
		color: #000000;
		line-height: 38rpx;
	}
	.swiper-box-number-text1{
		font-size: 24rpx;
		font-family: Arvo-Regular, Arvo;
		font-weight: 400;
		color: #000000;
		line-height: 38rpx;
	}
	.swiper-box-view{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.active-swiper-box-view-item{
		padding: 16rpx 26rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: 400;
		color: #ffffff;
		line-height: 28rpx;
		background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919793742137642.png') no-repeat;
		background-size: 100% 100%;
		border-radius: 12px;
		margin: 0rpx 10rpx;
	}
	.swiper-box-view-item{
		padding: 16rpx 26rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 28rpx;
		background: #ffffff;
		border-radius: 12px;
		margin: 0rpx 10rpx;
	}
	.fenxiang-box{
		width: 48rpx;
		height: 48rpx;
	}
	.swiper-image{
		width: 48rpx;
		height: 48rpx;
	}
	.box{
		padding: 48rpx 28rpx;
	}
	.box-name{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.name{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.name-text{
		font-size: 36rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 42rpx;
	}
	.name-text1{
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 42rpx;
	}
	.name-text1-group{
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 42rpx;
	}
	.price{
		padding-top: 26rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.price-left{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.price-left-text{
		font-size: 36rpx;
		font-family: Arvo-Regular, Arvo;
		font-weight: 400;
		color: #5D22BA;
		line-height: 42rpx;
	}
	.price-left-text1{
		margin-left: 32rpx;
		font-size: 28rpx;
		font-family: Arvo-Regular, Arvo;
		font-weight: 400;
		color: #BBBBBB;
		line-height: 32rpx;
		text-decoration: line-through;
	}
	.price-left-text2{
		margin-left: 32rpx;
		font-size: 24rpx;
		font-family: Arvo-Regular, Arvo;
		font-weight: 400;
		color: #8866BF;
		line-height: 28rpx;
		padding: 4rpx 8rpx;
		background: #E9DBFF;
	}
	.price-right{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 28rpx;
	}
	.box1{
		padding: 48rpx 0rpx;
        border-top: 0.5px solid #E3E3E3;
		border-bottom: 0.5px solid #E3E3E3;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.box1-text{
		padding-left: 28rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #262520;
		line-height: 38rpx;
	}
	.box1-text1{
		padding: 0rpx 20rpx 0rpx 28rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #262520;
		line-height: 38rpx;
	}
	.box1-image{
		width: 36rpx;
		height: 36rpx;
		margin-right: 16rpx;
	}
	.box-baozhang{
		padding: 48rpx 0rpx;
		border-bottom: 0.5px solid #E3E3E3;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.box-baozhang-left{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.box-baozhang-view{
	    display: flex;
	    flex-direction: row;
	    align-items: center;
		margin-left: 20rpx;
		flex-wrap: wrap;
		flex: 1;
	}
	.box-baozhang-view1{
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: 400;
		color: #262520;
		line-height: 28rpx;
		overflow: hidden;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		flex: 1;
		margin-right: 20rpx;
	}
	.box-baozhang-view1-view1{
		overflow: hidden;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.box-baozhang-view-item{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 14rpx;
		
	}
	.box-baozhang-view-item image{
		width: 28rpx;
		height: 28rpx;
		margin-right: 4rpx;
	}
	.box-baozhang-view-item text{
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: 400;
		color: #262520;
		line-height: 28rpx;
	}
	.box2{
		padding: 48rpx 28rpx 0rpx 28rpx;
	}
	.box2-title{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding-bottom: 20rpx;
	}
	.box2-title-xian{
		width: 132rpx;
		height: 0px;
		border: 1px solid #333333;
	}
	.box2-title-view{
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 38rpx;
		padding: 0rpx 14rpx;
	}
	.u-content{
		img{
			width: 1005;
		}
	}
	.box3{
		width: 100%;
		height: 180rpx;
	}
	.box4{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		height: 168rpx;
		background: #FFFFFF;
		padding: 8rpx 28rpx 0rpx 28rpx;
        border-top: 0.5px solid #F3F3F3;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.box4-item{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.box4 button{
		padding: 0;
	}
	.box4-item1{
		display: flex;
		flex-direction: column;
		align-items: center;
		background: none;
		padding: 0;
		margin: 0;
	}
	.box4-item1::after{
		border: none;
	}
	.box4-item-image{
		width: 48rpx;
		height: 48rpx;
	}
	.box4-item-text{
		margin-top: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 28rpx;
	}
	.box4-btn-gwd{
		margin-top: 8rpx;
		width: 232rpx;
		height: 80rpx;
		border: 1px solid #5D22BA;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #5D22BA;
		line-height: 80rpx;
		text-align: center;
	}
	.box4-btn-gm{
		margin-top: 8rpx;
		width: 232rpx;
		height: 80rpx;
		background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919793742137642.png') no-repeat;
		background-size: 100% 100%;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #ffffff;
		line-height: 80rpx;
		text-align: center;
	}
	.box4-btn-gwd1{
		margin-top: 8rpx;
		width: 232rpx;
		height: 80rpx;
		border: 1px solid #999999;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 80rpx;
		text-align: center;
	}
	.box4-btn-none{
		margin-top: 8rpx;
		width: 232rpx;
		height: 80rpx;
		// border: 1px solid #999999;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 80rpx;
		text-align: center;
	}
	.box4-btn-sq{
		margin-top: 8rpx;
		width: 232rpx;
		height: 80rpx;
		background: #999999;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}
	
	.warp {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.rect {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}
	.rect-box{
		padding: 28rpx 28rpx 48rpx 28rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.rect-box-left{
		display: flex;
		flex-direction: row;
		width:100%;
	}
	.rect-box-left image{
		width: 248rpx;
		height: 248rpx;
	}
	.rect-box-left-content{
		margin: 0rpx 16rpx 0rpx 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
		width:100%;
	}
	.rect-box-left-content-name{
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 32rpx;
	}
	.rect-box-left-content-price{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.rect-box-left-content-price-text{
		font-size: 36rpx;
		font-family: Arvo-Regular, Arvo;
		font-weight: 400;
		color: #5D22BA;
		line-height: 42rpx;
	}
	.rect-box-left-content-price-text1{
		margin-left: 32rpx;
		font-size: 28rpx;
		font-family: Arvo-Regular, Arvo;
		font-weight: 400;
		color: #B3B3B4;
		line-height: 32rpx;
		text-decoration: line-through;
	}
	.rect-box-image{
		width: 40rpx;
		height: 40rpx;
		margin-left: 20rpx;
	}
	.rect-box1{
		padding: 18rpx 0rpx;
        border-top: 0.5px solid #E3E3E3;
		border-bottom: 0.5px solid #E3E3E3;
	}
	.rect-box1-title{
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 32rpx;
		padding-left: 28rpx;
	}
	.rect-box1-container{
		padding-left: 28rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.rect-box1-container-item{
		border-radius: 5px;
		margin: 24rpx 32rpx 0rpx 0rpx;
		min-width: 52rpx;
		padding: 0rpx 12rpx;
		background: #F4F4F4;
		font-size: 28rpx;
		font-family: Arvo-Regular, Arvo;
		font-weight: 400;
		color: #333333;
		line-height: 54rpx;
		text-align: center;
		position: relative;
	}
	.rect-box1-container-item1{
		min-width: 52rpx;
		border-radius: 5px;
		margin: 24rpx 32rpx 0rpx 0rpx;
		padding: 0rpx 12rpx;
        background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919793742137642.png') no-repeat;
        background-size: 100% 100%;
		font-size: 28rpx;
		font-family: Arvo-Regular, Arvo;
		font-weight: 400;
		color: #ffffff;
		line-height: 54rpx;
		text-align: center;
		position: relative;
	}
	.quehuo{
		position: absolute;
		top: -14rpx;
		right: -20rpx;
		padding: 4rpx;
		border-radius: 4px;
		font-size: 16rpx;
		font-family: Arvo-Regular, Arvo;
		font-weight: 400;
		color: #333333;
		line-height: 20rpx;
		background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919793742137642.png') no-repeat;
		background-size: 100% 100%;
	}
	.active-quehuo{
		position: absolute;
		top: -14rpx;
		right: -20rpx;
		padding: 4rpx;
		border-radius: 4px;
		font-size: 16rpx;
		font-family: Arvo-Regular, Arvo;
		font-weight: 400;
		color: #ffffff;
		line-height: 20rpx;
		background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919793742137642.png') no-repeat;
		background-size: 100% 100%;
	}
	.rect-box2{
		padding: 40rpx 0rpx;
		border-bottom: 0.5px solid #E3E3E3;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.rect-box2-title{
		padding-left: 28rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 32rpx;
	}
	.rect-box2-number{
		width: 150rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-right: 28rpx;
	}
	.rect-box2-number image{
		width: 28rpx;
		height: 28rpx;
	}
	.rect-box2-number text{
		font-size: 28rpx;
		font-family: Arvo-Regular, Arvo;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
	}
	.rect-box3{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0rpx 28rpx;
		width: 750rpx;
		height: 168rpx;
	}
	.rect-box3-price{
		padding-top: 28rpx;
		font-size: 36rpx;
		font-family: Arvo-Regular, Arvo;
		font-weight: 400;
		color: #5D22BA;
		line-height: 42rpx;
	}
	
	.warp1 {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.xiazai{
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 180rpx;
		width: 100%;
	}
	.xiazai image{
		width: 104rpx;
		height: 104rpx;
	}
    
	
	.box-xuanfu{
		display: flex;
		flex-direction: column;
		position: fixed;
		right: 15rpx;
		bottom: 310rpx;
	}
	.box-xuanfu-btn{
		border: none;
		border-radius:0;
		background-color:transparent;
		padding: 0;
		height: 140rpx;
		margin: 0;
		padding: 0;
		padding-bottom: 10rpx;
	}
	.box-xuanfu-btn::after {
	    border: none;
	}
	.box-xuanfu image{
		width: 128rpx;
		height: 128rpx;
		margin-top: 14rpx;
	}
	
	.security-box{
		padding: 28rpx 28rpx 48rpx 28rpx;
	}
	.security-item{
		padding-bottom: 24rpx;
	}
	.security-item-title{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.security-item-title image{
		width: 28rpx;
		height: 28rpx;
	}
	.security-item-title text{
		flex: 1;
		margin-left: 20rpx;
		font-size: 28rpx;
		font-family: Arvo-Regular, Arvo;
		font-weight: 600;
		color: #333333;
		line-height: 34rpx
	}
	
	.security-item-content{
		padding-top: 20rpx;
		font-size: 28rpx;
		font-family: Arvo-Regular, Arvo;
		font-weight: 400;
		color: #333333;
		line-height: 34rpx
	}
	.security-box-btn{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
	}
	.security-btn{
		width: 646rpx;
		height: 88rpx;
		background: #BD0632;
		border-radius: 10px 10px 10px 10px;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
	}
	
	.rect-wuliu{
		width: 750rpx;
		height: 800rpx;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}
	.box-wuliu{
		padding: 28rpx 28rpx 40rpx 28rpx;
	}
	.box-wuliu-title{
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.box-wuliu-view{
		padding-top: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 34rpx;
	}
	.box-wuliu-view1{
		padding-top: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 34rpx;
	}
	
	.rect3 {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 36rpx;
	}
	.rect3-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 120rpx;
	}
	.rect3-box-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0;
		padding: 0;
		background: none;
	}
	.rect3-box-item::after{
		border:0
	}
	.rect3-box-item1{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.rect3-box-item-image{
		width: 88rpx;
		height: 88rpx;
	}
	.rect3-box-item-text{
		font-size: 27rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 32rpx;
		padding-top: 10rpx;
	}
	.rect3-bottom{
		width: 678rpx;
		padding: 30rpx 0rpx 20rpx 0rpx;
		text-align: center;
		font-size: 40rrpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 48rpx;
	}
	
	.warp4 {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.rect4{
	   width: 678rpx;
	   padding: 36rpx 22rpx 22rpx 36rpx;
	   background: #ffffff;
	   border-radius: 16rpx 16rpx 16rpx 16rpx;
	   z-index: 9999;
	   
	}
	.rect4-top{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.rect4-top text{
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 38rpx;
	}
	.rect4-top image{
		width: 66rpx;
		height: 66rpx;
	}
	.rect4-btn{
		width: 606rpx;
		height: 88rpx;
		background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919793742137642.png') no-repeat;
		background-size: 100% 100%;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
	}
</style>
